<!DOCTYPE html>
<legend >Movimientos</legend>


<ul id="" class="nav nav-tabs">
    <li class="active"><a href="#">Listado</a></li>
    <li id="agregar-movimiento"><a href="#">Agregar nuevo</a></li>
</ul>

<div id="listado-movimientos">
    
    <div id="movimiento-editor"></div>
    
    <table id="tabla-movimientos" class="table table-bordered">
        
        <thead>
            <tr>
                <th>Cantidad</th>
                <th>Descripción</th>
                <th>Lote</th>
                <th>Vencimiento</th>
                <th>Almacén</th>
                <th>Acciones</th>
            </tr>
        </thead>
        
        <tbody>
            {foreach from=$remito->movimiento item="movimiento"}
            <tr data-movimiento-id="{$movimiento->id}">
                <td>{$movimiento->cantidad|string_format:"%.2f"} {$movimiento->producto->medida->simbolo}</td>
                <td>{$movimiento->producto->descripcion}</td>
                <td>{if $movimiento->producto->loteable eq 1}{$movimiento->lote->codigo}{/if}</td>
                <td>{if $movimiento->producto->loteable eq 1}{$movimiento->producto->lote->fecha_vencimiento}{/if}</td>
                <td>{$movimiento->almacen->descripcion}</td>
                <td class="span2">
                    <a id="" name="" href="#" class='corregir-movimiento' data-movimiento-id='{$movimiento->id}'>Corregir</a>

                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <a id="" name="" href="movimientos/delete/{$movimiento->id}/" class='borrar-movimiento'>Eliminar</a>

                </td>
            </tr>
            {/foreach}
        </tbody>
        
    </table>  
    
</div>

<script>
    jQuery(document).ready(function(){
        
        // AGREGAR MOVIMIENTO
        jQuery('#agregar-movimiento').on(
            'click',
            'a',
            {
                url: 'movimientos/create/{$remito->id}/', 
                selectorDestino: '#movimiento-editor'
            }, 
            obtenerFormulario
        );

        // CORREGIR MOVIMIENTO
        jQuery('#tabla-movimientos').on(
            'click',
            '.corregir-movimiento',
            {
                url: '',
                selectorDestino: '#movimiento-editor'
			},
            function(event) {
                event.data.url = 'movimientos/update/'+jQuery(this).attr('data-movimiento-id');
                obtenerFormulario(event);
            	jQuery(this).parents("tr").hide()
            }
        );
        
        jQuery('#movimiento-editor').on(
            'submit', 
            'form',
            {
                objetoID: {$remito->id},
                selectorDestino: '#tabla-movimientos tbody',
                selectorEditor: '#movimiento-editor'
                           
            },
            //TODO: Borrar el TD anterior.
            guardarCreacion
        );

   		// BORRAR MOVIMIENTO
    	jQuery('.borrar-movimiento').on('click', function(event) {
            event.preventDefault();
            event.stopPropagation();
            var tr = jQuery(this).parents("tr");
            
            jQuery.get(this.href, function(data) {
                tr.fadeOut( function() { jQuery(this).remove(); });
            });

		});

    });    
</script>